<template>
  <uni-nav-bar title="常驻地址" color="#333" left-icon="left" @clickLeft="navBack" statusBar fixed></uni-nav-bar>
  <AddressList @select-address="selectAddress" />
  <view class="btn-box flex-hcenter">
    <view class="flex-center btn" @click="navTo('appointment/address-form')">新地址</view>
  </view>
</template>

<script setup lang="ts">
import { useAddressStore } from '@/stores/address';
import { navBack, navTo } from '@/utils/navigator';
import AddressList from '@c/address/AddressList.vue';

const addressStore = useAddressStore();

function selectAddress(addr) {
  const info = {
    location: addr.abbreviate,
    address: addr.address,
    latitude: addr.latitude,
    longitude: addr.longitude,
    consignee: addr.consignee,
    phone: addr.phone,
  };
  addressStore.setDeliveryInfo(info);
  navBack();
}
</script>

<style scoped lang="less">
.btn-box {
  position: fixed;
  bottom: 0;
  width: 100vw;
  height: 160rpx;
  padding-top: 20rpx;
  background: linear-gradient(transparent, #ffffff66 20%, rgba(255, 255, 255, 0.8) 50%, #fff);

  .btn {
    width: 370rpx;
    height: 80rpx;
    font-size: 36rpx;
    color: white;
    background: linear-gradient(180deg, #41a3ff 0%, #1b91ff 100%);
    border-radius: 5px;
  }
}
</style>
